
<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">选择供应商</el-button>

    <el-dialog title="供应商" :visible.sync="dialogTableVisible">
      <el-table
          :data="supplierPageInfo.list"
          height="500px"
          max-height="100%"
          border
          highlight-current-row
          @current-change="handleCurrentNow"
          style="width: 100%">
        <el-table-column
            type="index"
            width="180" label="序号">
        </el-table-column>
        <el-table-column
            prop="supplierName"
            label="供应商名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="supplierState"
            label="供应商状态"
            width="180"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.supplierState === '合格供应商'" type="success">{{ scope.row.supplierState }}</el-button>
            <el-button v-else-if="scope.row.supplierState === '潜在供应商'" type="danger">{{ scope.row.supplierState }}</el-button>
            <el-button v-if="scope.row.supplierState === '一级供应商'" type="success">{{ scope.row.supplierState }}</el-button>
            <el-button v-else-if="scope.row.supplierState === '二级供应商'" type="danger">{{ scope.row.supplierState }}</el-button>
            <el-button v-if="scope.row.supplierState === '三级供应商'" type="success">{{ scope.row.supplierState }}</el-button>
          </template>

        </el-table-column>
        <el-table-column
            prop="supplierType"
            label="供应商分类"
            width="180">
          <template slot-scope="scope">
            <el-button v-if="scope.row.supplierType === '零件供应商'" type="warning">{{ scope.row.supplierType }}</el-button>
            <el-button v-else-if="scope.row.supplierType === '集合供应商'" type="success">{{ scope.row.supplierType }}</el-button>
            <el-button v-else-if="scope.row.supplierType === '成品供应商'" type="danger">{{ scope.row.supplierType }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="supplierCode"
            label="供应商编码">
        </el-table-column>

        <el-table-column
            prop="supplierAddress"
            label="供应商地址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="supplierSign.startTime"
            label="签约开始日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="supplierSign.endTime"
            label="签约结束日期">
        </el-table-column>
        <el-table-column
            prop="supplierSign.supplierSignDeadline"
            label="结算期限"
            width="180">
        </el-table-column>

        <el-table-column
            prop="supplierSign.creditLimit"
            label="信用额度"
            width="180">
        </el-table-column>
        <el-table-column
            prop="attachment.name"
            label="资质/证书名称">
        </el-table-column>

        <el-table-column
            prop="attachment.type"
            label="证书类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="attachment.upFileName"
            label="资质/证书附件"
            width="180">
          <template slot-scope="scope">
            <img :src="$basePath+'static/uploadImages/'+scope.row.attachment.upFileName" style="max-width: 100px">
          </template>
        </el-table-column>
        <el-table-column
            prop="contactinfo.name"
            label="联系人姓名">
        </el-table-column>
        <el-table-column
            prop="contactinfo.phone"
            label="联系人电话"
            width="180">
        </el-table-column>

        <el-table-column
            prop="contactinfo.job"
            label="联系人职位"
            width="180">
        </el-table-column>

        <el-table-column
            prop="invoiceHeader"
            label="发票抬头"
            width="180">
        </el-table-column>
        <el-table-column
            prop="taxNum"
            label="税号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="taxType"
            label="税种"
            width="180">
        </el-table-column>
        <el-table-column
            prop="taxRate"
            label="税率"
            width="180">
        </el-table-column>
        <el-table-column
            prop="bank"
            label="开户银行"
            width="180">
        </el-table-column>
        <el-table-column
            prop="bankNum"
            label="银行账号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="invoiceHeader"
            label="发票抬头"
            width="180">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="更新时间"
            width="180">
          <template slot-scope="scope">
            <span>{{$dayjs(scope.row.updateTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
      <div style="margin-top: 20px">
        <el-button @click="setCurrentEenter">确定选择</el-button>
        <el-button @click="setCurrent()">取消选择</el-button>
      </div>
    </el-dialog>
    <el-form ref="form" :model="supplierNow" label-width="100px">

      <el-form-item label="供应商名称">
        <div class="e2">
          <span id="person2">{{ supplierNow.supplierName || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="供应商编码">
        <div class="e2">
          <span id="person2">{{ supplierNow.supplierCode || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="供应商分类">
        <div class="e2">
          <span id="person2">{{ supplierNow.supplierType || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="供应商等级">
        <div class="e2">
          <span id="person2">{{ supplierNow.supplierLevel || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="签约开始日期">
        <div class="e2">
          <span id="person2">{{ supplierNow.enterTime || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="签约结束日期">
        <div class="e2">
          <span id="person2">{{ supplierNow.supplierName || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>

      <el-form-item label="采购负责人">
        <div class="e2">
          <span id="person2">{{ supplierNow.contactinfo.name || '选择供应商之后自动获取' }}</span>
        </div>
      </el-form-item>
    </el-form>






    <el-input v-model="productUnitPrice" placeholder="标准采购单价"></el-input>
    <el-input v-model="productPrice" placeholder="采购单价(含税)"></el-input>
    <el-input v-model="discountRate" placeholder="折扣率"></el-input>
    <el-input v-model="tax" placeholder="增值税率"></el-input>




    <el-button type="primary" @click="handleCurrentAll">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      supplierNow:{
        id: '',
        supplierName: '',
        contactinfo: {
          name: ''
        }
      },
      //标准采购单价
      productUnitPrice:'',
      //采购单价(含税)
      productPrice:'',
      //折扣率
      discountRate:'',
      //增值税率
      tax:'',

      currentPage:1,
      pageSize:5,
      supplier: {},
      supplierPageInfo:{},
      total:0,
      suppliers: [],
      currentRow:null
    };
  },
  created() {
    this.getSuppliers(1);
  },
  methods: {
    setCurrentEenter() {
      if (this.currentRow === null) {
        this.$message.error('请选择供应商');; // 使用 el-message 弹出提示信息
      } else {
        console.log('选中的行:', this.currentRow);
        this.supplierNow = this.currentRow;
        this.dialogTableVisible=false;
        console.log('选中给supplierNow:', this.supplierNow)
        this.$message.success('已选择供应商');
      }
    },
    submitForm(){
      this.$axios.post("/manage/productSupplier/add").then(
          response=>{
            if (response.data) {

              this.$message.success('添加成功');
            }
          }
      )
    },
    setCurrent(row) {
      this.currentRow =null;
      this.dialogTableVisible=false;
    },
    handleCurrentNow(val){
      this.currentRow = val;
      console.log(this.currentRow)
    },

    //分页相关
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getSuppliers();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getSuppliers(val);
      this.currentPage = val;
    },
    //分页查询供应商
    getSuppliers(pageNum){
      console.log(this.supplier);
      this.$axios.post("manage/supplier/list",this.supplier,{params:{pageNum:pageNum,pageSize:this.pageSize}}).then(
          response=>{
            if (response.data) {
              const data = response.data;
              console.log(response.data);
              this.supplierPageInfo = data.supplierPageInfo; // 更新分页信息
              this.total = data.supplierPageInfo.total; // 更新总数据量
              this.suppliers = data.supplierPageInfo.list; // 更新供应商列表
            } else {
              console.error("请求失败:", response.data.message);
            }
          }).catch(error => {
        console.error("请求错误:", error);
      });
    },

  }
};
</script>
<style scoped>

</style>